<template>
  <div>
    <div class="top">
      <el-menu
        router
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect"
      >
        <el-row type="flex" justify="center">
          <el-col :span="6" />
          <el-col>
            <el-row
              type="flex"
              justify="star"
              class="Navigation"
            >
              <router-link to="/">
                <img style="width: 100px; height: 80px" src="https://hmhr-1308572366.cos.ap-nanjing.myqcloud.com/flog.png" alt="">
              </router-link>
              <el-menu-item index="/index">首页</el-menu-item>
              <el-menu-item index="/economic">房产经纪</el-menu-item>
              <el-menu-item index="/classification">房产详情</el-menu-item>
              <el-menu-item index="/we">关于我们</el-menu-item>
            </el-row>
          </el-col>
        </el-row>
      </el-menu>
    </div>
    <router-view />
    <div class="footer">
      <el-row type="flex" justify="center">
        <el-col :span="5">
          <p>港交所上市企业空中花园（flyhouse）</p>
          <p>000-000-123</p>
          <p>由最帅设计师刘某赞助</p>
        </el-col>
        <el-col :span="9">
          <el-row type="flex" justify="end" class="Copywriting">
            <el-col>
              <div style="float:right">
                <img src="//img602.yun300.cn/repository/image/b1a30029-b281-45ea-9002-e74acf069fad.jpg?tenantId=215997&amp;viewType=1&amp;k=1610443611000" alt="底部logo" title="底部logo" width="200px" height="200px">
              </div>
              <p>前面是一种历史的风景</p>
              <p>后面是一个国家的经济</p>
            </el-col>
            <el-col :span="10">
              <p class="you">关上家门，打开心门</p>
              <p class="you">门外是世界，门里是生活</p>
              <p class="you">有了房子，在外也不是游子</p>
              <p class="you">因为有了房，所以多了个故乡</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import eventBus from '@/eventBus'

export default {
  data() {
    return {
      activeIndex: '/' + location.hash.split('/')[1],
      fits: ['cover'],
      url: ''
    }
  },
  created() {
    eventBus.$on('transportData', val => { // 接收save.vue中传过来的data_1的值
      this.activeIndex = val
    })
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index
      console.log(index)
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  height: 80px;
  width: 100%;
}
.footer{
  color: #fff;
  background: -webkit-linear-gradient(left,#0F2027,#434343,) no-repeat;
  .Copywriting{
   font-size: 12px;
   .you{
     float:right;
   }
  }
}
.el-menu-demo{
 background: -webkit-linear-gradient(left,#0F2027,#434343,) no-repeat;
}
.el-menu-item, .el-submenu__title{
height: 100%;
line-height: 80px;
}

</style>
